
<div class="layui-carousel layadmin-carousel layadmin-shortcut" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height:280px;">
    <div carousel-item="">
        <ul class="layui-row layui-col-space10 layui-this" id="checkedid">

       <!--     <li class="layui-col-md4">
                <a lay-href="set/user/info">
                    <i class="layui-icon layui-icon-set"></i>
                    <cite>我的资料</cite>
                </a>
            </li>
            <li class="layui-col-md4">
                <a lay-href="set/user/info">
                    <i class="layui-icon layui-icon-set"></i>
                    <cite>我的资料</cite>
                </a>
            </li>
            <li class="layui-col-md4">
                <a lay-href="set/user/info">
                    <i class="layui-icon layui-icon-set"></i>
                    <cite>我的资料</cite>
                </a>
            </li>
            <li class="layui-col-md4">
                <a lay-href="set/user/info">
                    <i class="layui-icon layui-icon-set"></i>
                    <cite>我的资料</cite>
                </a>
            </li>
            <li class="layui-col-md4">
                <a lay-href="set/user/info">
                    <i class="layui-icon layui-icon-set"></i>
                    <cite>我的资料</cite>
                </a>
            </li>
            <li class="layui-col-md4">
                <a lay-href="set/user/info">
                    <i class="layui-icon layui-icon-set"></i>
                    <cite>更多</cite>
                </a>
            </li>-->
        </ul>
    </div>
</div>


<!--<div class="sidebar-nav" style="overflow:auto;overflow-x: hidden">-->

<!-- overflow: auto; overflow-x:hidden; width: 750px;-->
<div id="addContent" style="display: none;overflow: auto; overflow-x:hidden; width: 750px;">

<div>

    <div  style="text-align:right;">

        <!--<button  type="button" class="layui-btn site-demo-active" style="margin-top: 10px;" >取消</button>-->

        <button type="button"  class="layui-btn site-demo-active" data-type="sureBtn" style="margin-right:10px; margin-right: 14px;margin-top: 10px; top: 0px;" >确定</button>

    </div>

</div>

<div class="layui-card-header"><strong>我的应用</strong></div>

<div class="layui-tab" lay-filter="demo"  style="width:750px;">

    <ul class="layui-tab-title" id="checkedApp">

       <!-- <li class="layui-this" lay-id="11">网站设置</li>
        <button class="layui-btn site-demo-active" data-type="tabDelete" id="openbtn0">删除</button>

        <li lay-id="22">用户基本管理</li>

        <button class="layui-btn site-demo-active" data-type="tabDelete" id="openbtn1">删除</button>

        <li lay-id="33">权限分配</li>

        <button class="layui-btn site-demo-active" data-type="tabDelete" id="openbtn2">删除</button>

        <li lay-id="44">商品管理</li>
        <button class="layui-btn site-demo-active" data-type="tabDelete" id="openbtn3">删除</button>
-->
    </ul>
</div>

<div class="layui-card-header"><strong>未选择应用</strong></div>

<div class="layui-tab" lay-filter="demo1" style="width: 750px;">

    <ul class="layui-tab-title" id="nonCheckApp">



<!--
        <li class="layui-this" lay-id="77">网站设置</li>
        <button class="layui-btn site-demo-active" data-type="tabAdd" id="openbtn5">添加</button>

        <li lay-id="88">用户基本管理</li>

        <button class="layui-btn site-demo-active" data-type="tabAdd" id="openbtn6">添加</button>


        <li lay-id="99">权限分配</li>
        <button class="layui-btn site-demo-active" data-type="tabAdd" id="openbtn7">添加</button>

        <li lay-id="100">商品管理</li>

        <button class="layui-btn site-demo-active" data-type="tabAdd" id="openbtn8">添加</button>
-->
    </ul>

</div>

</div>

<script>

    layui.use(['element','jquery'], function() {

        var $ = layui.jquery
            , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //读取外面菜单
        $.ajax({

            type: 'get',
            url: serverPath.systemPath + layui.setter.sysLinkPath + 'sysUserColumnRes/userRes',
            dataType: 'json',
            async: false,

            success: function (data) {


                console.log(data.data.userResList);

                if (data.code == 0) {

                    var userResListContent='';

                    var userResListContentData = data.data.userResList;

                    var userNum=0;

                    userNum = userResListContentData.length


                    if (userNum==0){

                        userResListContent += '<li class="layui-col-md4" id="addid"><a> <i class="layui-icon layui-icon-set"></i> <cite>新建删除</cite> </a> </li>'

                    }

                    for (var i = 0; i <=userNum; i++) {

                        // '<li class="layui-col-md4"><a lay-href="set/user/info"> <i class="layui-icon layui-icon-set"></i> <cite>'+userResListContentData[i].resName+'</cite> </a> </li>'


                            //三种情况 1 userNum = 0  2 usernum >5   3 0<usernum <=5


                            if (0<userNum&&userNum<=5){


                                if (i<userNum) {


                                    var  iconTuBiao='';


                                    if (userResListContentData[i].iconSkin==null){

                                        iconTuBiao="layui-icon layui-icon-set";

                                    }else
                                        iconTuBiao="layui-icon " +userResListContentData[i].iconSkin;

                                    userResListContent += '<li class="layui-col-md4"><a lay-href="'+serverPath.systemPath + userResListContentData[i].defaultUrl+'"> <i class="'+iconTuBiao+'"></i> <cite>'+ userResListContentData[i].resName + '</cite> </a> </li>'

                                }else
                                    userResListContent += '<li class="layui-col-md4" id="addid"><a> <i class="layui-icon layui-icon-set"></i> <cite>新建删除</cite> </a> </li>'


                            }

                            if (userNum>5){


                                if (i<5){


                                    var  iconTuBiao='';

                                    if (userResListContentData[i].iconSkin==null){

                                        iconTuBiao="layui-icon layui-icon-set";

                                    }else
                                        iconTuBiao="layui-icon " +userResListContentData[i].iconSkin;
                                    userResListContent += '<li class="layui-col-md4"><a lay-href="'+serverPath.systemPath +userResListContentData[i].defaultUrl+'"> <i class="'+iconTuBiao+'"></i> <cite>'+ userResListContentData[i].resName + '</cite> </a> </li>'


                                } else
                                    userResListContent += '<li class="layui-col-md4" id="addid"><a> <i class="layui-icon layui-icon-set"></i> <cite>新建删除</cite> </a> </li>'


                            }

                    }


                }



                $("#checkedid").append(userResListContent);


            }, error: function (data) {


            }
        });

        //关掉弹框
        moveMask('#addContent');

        $('#addid').click(function () {

            layer.open({
                type: 1,
                title: '模块设计',
                skin: 'layui-layer-molv',
                offset: '25px',
                area: ['750px', '670px'],
                content: $('#addContent'),

                success: function (layero, index) {
                    // parent.layer.iframeAuto(index);
                    //渲染组件
                    // layui.form.render("select");
                },
                cancel: function (layero, index) {

                }
            });
        });

        //解决弹框下的阴影
        function moveMask(tagsel){
            layui.$("body > "+tagsel).remove();
            layui.$("body").append($(tagsel));
        }

            // 读取数据
        $.ajax({

            type:'get',
            url:serverPath.systemPath + layui.setter.sysLinkPath + 'sysUserColumnRes/userRes',
            dataType:'json',
            async:false,

            success:function (data) {
                console.log(data.data.nonUserResList);

                if(data.code==0) {

                    var nonUserResListContent;
                    var userResListContent;

                    var nonUserResListContentData = data.data.nonUserResList;

                    var userResListContentData  = data.data.userResList;

                    for (var i = 0; i < nonUserResListContentData.length; i++) {

                        nonUserResListContent += '<li class="layui-this" lay-id="nonUser' + i + '">' + nonUserResListContentData[i].resName + '</li> <button class="layui-btn site-demo-active clickAdd" data-type="tabAdd"  id="'+nonUserResListContentData[i].resId+'">添加</button>'

                    }
                    for (var i = 0; i < userResListContentData.length; i++) {

                        userResListContent += '<li class="layui-this" lay-id="user' + i + '">' + userResListContentData[i].resName + '</li> <button class="layui-btn site-demo-active clickDelete" data-type="tabDelete" id="'+userResListContentData[i].resId+'">删除</button>'
                    }

                    // console.log(content);
                }

                $("#nonCheckApp").append(nonUserResListContent);

                $("#checkedApp").append(userResListContent);


            },error:function (data) {

            }

        });


        //触发事件
        var active = {

            sureBtn: function (othis) {

                //这里获取 所选区域的 ID

                var IDArry = new Array();　//创建一个数组

                $('#checkedApp').find('button').each(function () {

                    console.log(this);

                    // alert($(this).attr('id'));

                    IDArry.push($(this).attr('id'));

                })

                console.log(IDArry);


                // 上传数据数据哇
                $.ajax({

                    type: 'post',
                    url: serverPath.systemPath + layui.setter.sysLinkPath + 'sysUserColumnRes/saveUserRes',
                    data: {"resIds": IDArry, "columnId": 1},
                    dataType: 'json',

                    traditional: true,
                    async: false,
                    success: function (data) {

                        alert(data.msg);

                        console.log(data);

                        if (data != null) {

                            if (data.code == 0) {


                                window.parent.location.reload();//刷新父页面
                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                parent.layer.close(index);

                            }
                        }

                    }, error: function (data) {

                    }

                });

            }

        };


        $('.site-demo-active').on('click', function () {

            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });






    });

    $(document).on("click",".clickAdd",function(){

        var liDom = $(this).prev()[0];//这个是 按钮前的标签
        var btnDom = $(this)[0];//这个是按钮本身
        document.getElementById('checkedApp').appendChild(liDom);
        document.getElementById('checkedApp').appendChild(btnDom);
        $(this).html("删除");
        $(this).removeClass("clickAdd").addClass("clickDelete");
    });

    $(document).on("click",".clickDelete",function(){

        var liDom = $(this).prev()[0];//这个是 按钮前的标签
        var btnDom = $(this)[0];//这个是按钮本身

        document.getElementById('nonCheckApp').appendChild(liDom);
        document.getElementById('nonCheckApp').appendChild(btnDom);
        $(this).html("添加");
        $(this).removeClass("clickDelete").addClass("clickAdd");
    });



</script>


<!--<script language="javascript" type="text/javascript">-->

         <!--/*-->
            <!--$('#openbtn').click(function(){-->

                <!--window.location.href = 'twoHtml.html';-->

            <!--})*/-->


    <!--function clickon() {-->

        <!--window.location.href = 'demoYeMian/twoHtml.html';-->

    <!--}-->

<!--</script>-->

